import React from "react";
import { Routes, Route } from "react-router-dom";
import routes from "./routers";//引入路由表,由路径和去到哪的组件组成,路由器需要包裹路由表
// import Main from "./components/Main";
// import About from "./components/Main/about/index.jsx";
// import Home from "./components/Main/home/index.jsx";

export default function App() {
  return (
    <div>
      <Routes>
      {/* 一般不使用这个方式,我们有hooks 这是通过遍历路由表得到一个个的路由 */}
    {
      routes.map(item=>{
        return <Route path={item.path} element={item.element} key={item.path}/>
      })
    }


        {/* 包裹路由的外层一定是双标签,例如二级路由是在一级路由里面,被一级路由包裹住的.*/}
        {/* <Route path="/main" element={<Main />}>

          <Route path="/main/home" element={<Home />} />

          <Route path="/main/about" element={<About />} />
          <Route path="*" element={<Main/>}/>
        </Route> */}
      </Routes>
    </div>
  );
}
